<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>{% block title %}{% endblock %}</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
        .namespace {
            margin-top: 10px;
        }
        .namespace select,.namespace option {
            width: 150px;
            height: 40px;
            font-size: 20px;
        }
        /* 表格内溢出不隐藏*/
        .layui-table-cell {
            height: inherit;
        }
    </style>
</head>

<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header layui-bg-cyan">
    <div class="layui-logo layui-hide-xs layui-bg-cyan">k8s-dashboard</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
        <div class="namespace">
            <select name="namespace" id="nsSelect">
            </select>
        </div>
    </ul>

    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="/logout">
          <img src="/static/img/img_17.png" class="layui-nav-img">
          退出
        </a>
    </ul>
  </div>

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll layui-bg-cyan">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree layui-bg-cyan" lay-filter="test">
        <li class="layui-nav-item">
          <a class="" href="/"><i  class="layui-icon layui-icon-home">&nbsp;&nbsp;仪表盘</i></a>
        </li>

        <li class="layui-nav-item {% block item-1 %}{% endblock %}">
          <a class="" href="javascript:;"><i  class="layui-icon layui-icon-app">&nbsp;&nbsp;Kubernetes</i></a>
          <dl class="layui-nav-child">
            <dd><a href="{% url 'node' %}" class="{% block item-1-1 %}{% endblock %}">Node</a></dd>
            <dd><a href="{% url 'namespace' %}" class="{% block item-1-2 %}{% endblock %}">Namespaces</a></dd>
            <dd><a href="{% url 'pv' %}" class="{% block item-1-3 %}{% endblock %}">PersistentVolumes</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item {% block item-2 %}{% endblock %}">
          <a href="javascript:;"><i  class="layui-icon layui-icon-template-1">&nbsp;&nbsp;工作负载</i></a>
          <dl class="layui-nav-child">
            <dd><a href="{% url 'deployment' %}" class="{% block item-2-1 %}{% endblock %}">Deployments</a></dd>
            <dd><a href="{% url 'daemonset' %}" class="{% block item-2-2 %}{% endblock %}">DaemonSets</a></dd>
            <dd><a href="{% url 'statefulset' %}" class="{% block item-2-3 %}{% endblock %}">StatefulSets</a></dd>
            <dd><a href="{% url 'pod' %}" class="{% block item-2-4 %}{% endblock %}">Pods</a></dd>
          </dl>
        </li>

        <li class="layui-nav-item {% block item-3 %}{% endblock %}">
          <a href="javascript:;"><i class="layui-icon layui-icon-component">&nbsp;&nbsp;</i>负载均衡</a>
          <dl class="layui-nav-child">
            <dd class="{% block item-3-1 %}{% endblock %}"><a href="{% url 'service' %}">Services</a></dd>
            <dd class="{% block item-3-2 %}{% endblock %}"><a href="{% url 'ingress' %}">Ingresses</a></dd>
          </dl>
        </li>

        <li class="layui-nav-item {% block item-4 %}{% endblock %}">
          <a href="javascript:;"><i class="layui-icon layui-icon-file-b">&nbsp;&nbsp;</i>存储与配置</a>
          <dl class="layui-nav-child">
            <dd><a href="{% url 'pvc' %}" class="{% block item-4-1 %}{% endblock %}">PersistentVolumeClaims</a></dd>
            <dd><a href="{% url 'configmap' %}" class="{% block item-4-2 %}{% endblock %}">ConfigMaps</a></dd>
            <dd><a href="{% url 'secret' %}" class="{% block item-4-3 %}{% endblock %}">Secrets</a></dd>
          </dl>
        </li>

      </ul>
    </div>
  </div>

  <div class="layui-body" style="background-color: #eeeeee">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">{% block context %}{% endblock %}</div>
  </div>

  <div class="layui-footer" style="text-align: center">
    <!-- 底部固定区域 -->
    k8s-dashboard 底部区域
  </div>
</div>

<script src="/static/layui/layui.js"></script>

{% block custom_js %}{% endblock %}

<script>
//JS
layui.use(['layer'], function(){
  var element = layui.element
  ,layer = layui.layer
  ,$ = layui.jquery;

    $.ajax({
        type: "GET",
        async: false, // 设置同步
        timeout: 3000,
        url: "{% url 'namespace_api' %}",
        success: function (res) {
            if(res.code == 0){
                for(let index in res.data) {
                    row = res.data[index];
                    $('#nsSelect').append('<option value=' + row.name + '>' + row.name + '</option>')
                }
            } else {
                layer.open({
                    type: 0,
                    title: ['命名空间查询失败'],
                    content: '<span style="color:red;font-size: 18px">' + res.msg + '</span>'
                })
            }
        },
        error: function () {
            layer.open({
                type: 0,
                title: ['异常信息'],
                content: "获取命名空间列表失败！请检查K8s集群地址或者服务器！"
            })
        }
    });
    // 将当前选择的命名空间保存到本地浏览器session存储，以便其他页面能获取到当前选择的命名空间
    var storage = window.sessionStorage;  // 键值存储

    namespace = storage.getItem('namespace');
    if (namespace == null) {
         storage.setItem('namespace', "default"); // 打开浏览器登录后台后，session里没有值设置一个默认值为default
    } else {
        $("#nsSelect").val(namespace);  // 不为空，说明已经存储，将select选中为存储的值
    }

    $("#nsSelect").change(function () {
        var current_ns = $("#nsSelect").val(); // 获取选择的值
        storage.setItem('namespace', current_ns); // 添加数据
        //layer.msg("切换命名空间: " + current_ns, {icon: 6})
        location.reload() // 刷新页面，重新根据命名空间AJAX
    })

});
</script>
</body>
</html>